import React, {useEffect} from "react";
import {animated, useTrail,useSpringRef} from "@react-spring/web";
import { useInView } from "react-intersection-observer";

const Trails = (props)=>{
    const items = React.Children.toArray(props.children);
    const trailsRef = useSpringRef();
    const [refScroll,inView] = useInView({
        rootMargin: '-100px',
    });
    const trail = useTrail(items.length,{
        ref:trailsRef,
        config: { mass: 5, tension: 2000, friction: 200 },
        to: { opacity: 1, transform: 'translateY(0px) scale(1)', borderRadius: '20px', border: '1px solid #00b8d8' },
        from: { opacity: 0, transform: 'translateY(70px) scale(0.5)', borderRadius: '0px' },
        delay: 100,

    })
    useEffect(()=>{
        if (inView){
            trailsRef.start()
        }else {
            trailsRef.stop()
        }
    },[inView,trailsRef])
    return (
        <div ref={refScroll} className={props.className}>
            {trail.map((style, index)=>(
                <animated.div key={index} style={style}> {items[index]}</animated.div>
            ))}
        </div>
    )
}
export default Trails